<template>
    <div style="display: flex; width: 100%;">
        <LeftNavigation class="head-navi" :pageRouter="pageRouter" :navList="navList" :isCollapse="isCollapse" :addTab="addTab" :editableTabsValue="editableTabsValue"></LeftNavigation>
        <div style="display: flex; flex: 1; flex-direction: column;width: 85%;">
            <HeadNavigation class="left-navi" :logout="logout" :userInfo="userInfo" :changeCollapse="changeCollapse" :icon="icon"></HeadNavigation>
            <!-- 面包屑 -->
            <div style="height: 50px;width: 100%;">
                <el-tabs
                v-model="editableTabsValue"
                type="card"
                class="demo-tabs"
                :closable="this.editableTabs.length<=1?false:true"
                @tab-remove="removeTab"
                :tab-click="getNowTag(editableTabsValue)"
                >
                    <el-tab-pane
                    v-model="activeTab"
                    v-for="item in editableTabs"
                    :key="item.name"
                    :label="item.title" 
                    :name="item.name"
                    />
                </el-tabs>
            </div>

            <div class="se-page">
                <!-- 路由出口 -->
                <!-- 路由匹配到的组件将渲染在这里 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
        <span>
        确定退出登录吗?
        </span>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="logoutApi">
            确定
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script>
import LeftNavigation from '@/components/LeftNavigation.vue';
import HeadNavigation from '@/components/HeadNavigation.vue';
// import {getUserInfo} from '@/api/home'
// import {userLogout} from '@/api/home'
import { ElMessage } from 'element-plus'
//提升框导入
import { ref } from 'vue'
// const centerDialogVisible = ref(false)


export default {
    name:'PageHome',
    methods:{
        //路由跳转
        pageRouter(url,query={},restful={}){
            if(query.length > 0){
                //字符串转对象
                var queryObj = JSON.parse(query);
                //带参路由跳转
                this.$router.push({
                    path:url,
                    query:queryObj
                })
            }else if(restful.length > 0){
                 //字符串转对象
                var restfulObj = JSON.parse(restful);
                //带参路由跳转
                this.$router.push(`${url}/${restfulObj.uid}/${restfulObj.type}`)
            }else{
                //普通路由跳转
                this.$router.push(url)
            }
        },
        logout(){//退出登录
            this.centerDialogVisible = ref(true)
        },
        logoutApi(){//用户确定退出登录
            //发送请求
            localStorage.removeItem('user')
            this.$store.commit('logout')
            ElMessage.success("退出成功")
        },
        changeCollapse(){
            if(this.isCollapse){
                this.icon = 'iconfont icon-youduiqicopy'
                this.isCollapse=false
            }else{
                this.icon = 'iconfont icon-zuoduiqi'
                this.isCollapse=true
            }
        },
        changePage(url){//路由跳转
            // console.log(name,url)
            url= url==""?"/404":url;
            this.pageRouter(url);
            // //获取点击标签上的自定义属性的值
            // const query = e.currentTarget.dataset.query;
            // const restful = e.currentTarget.dataset.restful;
            // //没定义query，就不传
            // if(query != undefined){
            //     this.pageRouter(url,query)
            // }else if(restful != undefined){
            //     this.pageRouter(url,{},restful)
            // }else{
            //     this.pageRouter(url)
            // }
        },
        getNowTag(num){
            this.editableTabsValue=num
            for(var i=0;i<this.editableTabs.length;i++){
                if(this.editableTabs[i].name==num){
                    this.changePage(this.editableTabs[i].url)
                }
            } 
            this.$store.state.nowIndex=num
        },
        addTab(name,url,num){//添加面包屑
            var add = true;
            for(var i=0;i<this.editableTabs.length;i++){
                if(this.editableTabs[i].title != name){
                    add = true
                }else{
                    add = false
                    break
                }
            }
            if(add){
                    this.editableTabs.push({
                        title: name,
                        name: num,
                        url:url
                    })
                this.editableTabsValue = num
            }
            this.getNowTag(num)
        },
        removeTab(targetName){//删除面包屑
            const tabs = this.editableTabs
            let activeName = this.editableTabsValue 
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                    activeName = nextTab.name
                    }
                }
                })
            }
            this.editableTabsValue= activeName
            this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
        },
    },
    components:{
        LeftNavigation,
        HeadNavigation,
    },
    data(){
        return{
            openIndex:-1,
            isCollapse: false,//左边菜单栏伸缩
            icon:"iconfont icon-youduiqicopy",
            centerDialogVisible : ref(false),
            userInfo:{},
            navList:[
                {name:'用户管理',icon:'icon-wode',
                    content:[
                        {name:'用户信息',url:'/user'},
                        {name:'用户笔记',url:'/note'},
                        {name:'用户文章',url:'/article'},
                        {name:'用户评论',url:'/comment'},
                        {name:'用户二级评论',url:'/secondComment'},
                    ],
                },
                {name:'通知管理',icon:'icon-tongzhi2',
                    content:[
                        {name:'评论通知',url:'/messageNotice'},
                        {name:'点赞通知',url:'/dynamicNotice'},
                        {name:'关注通知',url:'/privateNotice'},
                        {name:'收藏通知',url:'/collectNotice'},
                        
                    ],
                },
                {name:'点赞管理',icon:'icon-dianzan',
                    content:[
                        {name:'点赞文章',url:'/likeArticle'},
                        // {name:'点赞评论',url:'/likeComment'},
                        // {name:'点赞二级评论',url:'/likeSecondComment'},
                    ],
                },
                {name:'收藏管理',icon:'icon-shoucang1',
                    content:[
                        // {name:'收藏文章',url:'/articleCollect'},
                        {name:'收藏题目',url:'/topicCollect'},
                        // {name:'收藏企业',url:'/companyCollect'},
                        // {name:'收藏评论',url:'/commentCollect'},
                        // {name:'收藏二级评论',url:'/secondCommentCollect'},
                    ]
                },
                {name:"企业管理",icon:"icon-timu",
                    content:[
                        {name:'企业详情',url:'/store'},
                        {name:'企业地址',url:'/address'},
                        {name:'融资类型',url:'/financing'},
                        {name:'行业类型',url:'/industry'},
                        {name:'企业待遇',url:'/treatment'},
                    ],
                },

                {name:'职位管理',icon:"icon-timu",
                    content:[ 
                        {name:'职位详情',url:'/zhiwei'},
                        {name:'职位要求',url:'/postAsk'},
                    ]
                },
                {name:'题库管理',icon:'icon-timu',
                     content:[
                        {name:'题库管理',url:'/topicLibrary'},
                        {name:'题目管理',url:'/topic'},
                    ],
                },
                {name:'技能管理',icon:"icon-timu",url:'/skill'},
                {name:'404页面',icon:'',url:''},
            ],
                //面包屑
            editableTabsValue:99,
            editableTabs:[
                {
                    title: "用户信息",
                    name: 99,
                    url:"/user"
                }
            ],

        }
    },
    // mounted(){
        // getUserInfo().then(
        //     response=>{
        //         this.userInfo=response.data;
        //         console.log('成功',response)
        //     }
        // )
    // },
   
}
</script>

<style scoped>
.left-navi{
    width: 100%;
}
.se-page{
    height: calc(100vh - 101px);
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>